<template>
  <div>
    <div class="comment-header">
      <div class="author">
        {{ commentlist.creator_name }}:
        <div class="comment-content">&nbsp;&nbsp;{{ commentlist.comment_content }}</div>
      </div>
      <div class="comment-options" v-if="!isMobile">
        <p class="timestamp">
          {{ commentlist.create_time | formatDate }}
          
                  <p class="options">
          <el-link
            @click="CommentThumb(comment)"
            :underline="false"
            type="info"
            :style="isLiked ? 'color:red' : ''"
            class="fa fa-heart"
          ></el-link>
          {{ commentlist.like_count }}
          <el-link
            :underline="false"
            @click="addReplyComment"
            style="margin:0 10px;"
            type="info"
            ><svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              style="color:#b4b4b4;"
              height="1em"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
                fill="currentColor"
              ></path>
            </svg>
            回复</el-link
          >
        </p>
          <a class="reply-fold" @click="FoldReplyCommentList"
            >查看回复评论
            <i v-if="!isFoldReplyCommentList" class="el-icon-caret-bottom"></i>
            <i v-else class="el-icon-caret-top"></i>
          </a>
        </p>

      </div>
    </div>
    <el-collapse-transition>
      <div>
        <div v-if="isFoldReplyCommentList">
          <div
            class="reply-content"
            v-for="reply in replycomment"
            :key="reply.id"
          >
            <ReplyCommentCard
              :comment="comment"
              :page="page"
              :replycomment="reply"
            />
          </div>
        </div>
        <div v-show="!replycomment.length && isFoldReplyCommentList">
          <el-empty description="暂无评论"></el-empty>
        </div>
      </div>
    </el-collapse-transition>

    <div
      v-if="isFoldReplyCommentList && count > 0"
      style="width:100%;text-align:center;"
    >
      <el-link @click="getOtherReplyComment" :underline="false"
        >查看其他回复评论({{ count }})<i class="el-icon-arrow-down"></i
      ></el-link>
    </div>
    <ReplyDialog
      :comment_id="comment.id"
      :reply_user_id="comment.user_id"
      :ShowDialog="ShowDialog"
      @custom-close="ReplyDialogClose"
      @custom-confirm="handleConfirm"
    />
  </div>
</template>

<script>
import ReplyCommentCard from './ReplyCommentCard'
import ReplyDialog from './ReplyDialog'
export default {
  props: {
    // 评论
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    ReplyCommentCard,
    ReplyDialog
  },
  data() {
    return {
      // 回复评论列表
      replycomment: [],
      ShowDialog: false,
      isFoldReplyCommentList: false,
      page: 1,
      isLiked: false,
      HaveOtherReply: true,
      limit: 3,
      count: '',
      commentlist: {}
    }
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {
    comment: {
      deep: true,
      immediate: true,
      handler() {
        this.commentlist = this.comment
      }
    }
  },
  created() {},
  mounted() {
    // 获取点赞状态
    this.getCommentThumbStatusByID()
  },
  methods: {
    // 评论点赞
    async CommentThumb(comment) {
      const datas = this.$qs.stringify({ comment_id: comment.id })
      const res = await this.$API.article.CommentThumb(datas)
      if (res.status == 200) {
        this.isLiked = !this.isLiked
        this.$message.success(this.isLiked ? '点赞成功' : '取消点赞成功')
        // 重新获得该评论
        const res2 = await this.$API.article.getCommentById(comment.id)
        // console.log("res2",res2)
        if (res2.status == 200) {
          this.commentlist = res2.data
        }
      }
    },
    // 展开获取回复数据
    async FoldReplyCommentList() {
      // 重置页码
      this.page = 1
      if (this.isFoldReplyCommentList)
        return (this.isFoldReplyCommentList = false)
      const { commentlist, page, limit } = this
      const res = await this.$API.article.getReplyCommentList(
        commentlist.id,
        limit,
        page
      )
      // console.log("commentar", res)
      if (res.status == 200) {
        this.count = res.data.count - res.data.payload.length
        this.isFoldReplyCommentList = !this.isFoldReplyCommentList
        this.replycomment = res.data.payload
      }
      // 如果没有新一页了仍然展开列表显示空状态
      else if (res.status == 422) {
        this.isFoldReplyCommentList = !this.isFoldReplyCommentList
      }
    },
    // 获取该评论点赞状态
    async getCommentThumbStatusByID() {
      const { commentlist } = this
      const res = await this.$API.article.getCommentThumbStatus(commentlist.id)
      // console.log("thumbstatus", res)
      if (res.status == 200) {
        this.isLiked = res.data
      }
    },
    // 获取其他回复评论
    async getOtherReplyComment() {
      // 增加页码数
      this.page++
      const res = await this.$API.article.getReplyCommentList(
        this.commentlist.id,
        this.limit,
        this.page
      )
      console.log('other', res)
      if (res.status == 200) {
        this.replycomment.push(...res.data.payload)

        this.count = res.data.count - this.replycomment.length
      }
    },
    // 为评论添加回复评论
    addReplyComment() {
      // 打开回复对话框
      this.ShowDialog = true
    },
    handleConfirm() {
      this.isFoldReplyCommentList = false
      console.log('isReply')
      this.FoldReplyCommentList().then(() => {
        this.ShowDialog = false
      })
    },
    ReplyDialogClose() {
      this.ShowDialog = false
    }
  }
}
</script>

<style scoped>
.comment-header {
  display: flex;
  flex-wrap: wrap;
}

.author {
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
  margin-bottom: 8px;
  margin-right: 7px;
}
.comment-options {
  display: flex;
  font-size: 14px;
  justify-content: flex-start;
  width: 100%;
}
.comment-content {
  font-weight: 500;
  line-height: 1.2em;
}
.timestamp {
  color: #999;
}

.reply-content {
  width: 90%;
  margin: 5px auto;
}

.comment-body {
  margin-bottom: 10px;
}

.replies {
  margin-top: 10px;
}

.reply {
  margin-bottom: 10px;
  border-left: 2px solid #eee;
  padding-left: 10px;
}
.options {
  margin-left: 10px;
}
.reply-fold {
  color: #91949a;
  cursor: pointer;
}
.reply-fold:hover {
  color: #9f7878;
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  #Content {
    /* position: absolute; */

    width: 80%;
    margin: 0px auto 0px auto;
    min-height: 90vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 auto;
  }
  .options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* 其他移动端样式设置 */
}
</style>
